{% extends "base.html" %}

{% block content %}
<div class="mb-6">
    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2"><i class="fa fa-history"></i> 提交记录</h1>
    <p class="text-dark-2">查看你的代码提交历史</p>
</div>

<!-- 筛选器 -->
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div class="flex flex-wrap gap-2">
            <span class="text-dark-2 font-medium">状态:</span>
            <!-- “全部”按钮 -->
            <button data-filter="all" class="filter-btn px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm hover:bg-light-2 transition-colors">全部</button>
            <!-- “通过”按钮 -->
            <button data-filter="accepted" class="filter-btn px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm hover:bg-light-2 transition-colors">
                <i class="fa fa-check-circle text-success mr-1"></i> 通过
            </button>
            <!-- “失败”按钮 -->
            <button data-filter="rejected" class="filter-btn px-3 py-1 rounded-full bg-light-1 text-dark-2 text-sm hover:bg-light-2 transition-colors">
                <i class="fa fa-times-circle text-danger mr-1"></i> 失败
            </button>
        </div>
        <div class="w-full md:w-auto">
            <div class="relative">
                <input type="text" id="search-input" placeholder="搜索问题..." 
                       class="form-input pl-4 pr-10 py-2 w-full md:w-64 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <div id="search-icon-container" class="absolute right-0 top-0 bottom-0 flex items-center pr-3 cursor-pointer">
                    <i id="search-icon" class="fa fa-search text-dark-2 transition-opacity duration-300"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 提交记录列表 -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-light-2">
            <thead class="bg-light-1">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">
                        问题
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">
                        提交时间
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">
                        状态
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">
                        执行时间
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-dark-2 uppercase tracking-wider">
                        语言
                    </th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-dark-2 uppercase tracking-wider">
                        操作
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-light-2">
                {% for submission in submissions %}
                <tr data-status="{{ submission.status }}" data-problem-title="{{ submission.problem.title|lower }}">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="ml-4">
                                <div class="text-sm font-medium text-dark">
                                    <a href="{{ url_for('problem_detail', problem_id=submission.problem_id) }}" class="hover:text-primary transition-colors">
                                        {{ submission.problem.title }}
                                    </a>
                                </div>
                                <div class="text-xs text-dark-2">
                                    {{ submission.problem.difficulty }}
                                </div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                        {{ submission.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if submission.status in ["accepted", "success", "pass"] %}
                        <span data-status="accepted" class="px-2 inline-flex items-center text-xs leading-5 font-semibold rounded-full bg-success/10 text-success cursor-pointer hover:bg-success/20 transition-colors">
                            <i class="fa fa-check-circle mr-1"></i> 通过
                        </span>
                        {% else %}
                        <span data-status="rejected" class="px-2 inline-flex items-center text-xs leading-5 font-semibold rounded-full bg-danger/10 text-danger cursor-pointer hover:bg-danger/20 transition-colors">
                            <i class="fa fa-times-circle mr-1"></i> 失败
                        </span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                        {{ submission.execution_time|round(3) }} 秒
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-dark-2">
                        {{ submission.language }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ url_for('submission_detail', submission_id=submission.id) }}" class="text-primary hover:text-primary/80 transition-colors">
                            查看详情
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
/* 高亮样式（可根据项目主题调整颜色） */
.filter-btn.active {
    background-color: #2563eb !important; /* 蓝色高亮，按需替换 */
    color: #fff !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const statusButtons = document.querySelectorAll('.filter-btn');
    const submissionRows = document.querySelectorAll('tbody tr');
    const searchInput = document.getElementById('search-input');
    const searchIcon = document.getElementById('search-icon');
    const searchIconContainer = document.getElementById('search-icon-container');

    let currentFilter = 'all';
    let currentSearch = '';

    // 按钮点击事件：精准控制高亮
    statusButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            // 1. 移除所有按钮的高亮
            statusButtons.forEach(b => {
                b.classList.remove('active');
            });
            // 2. 给当前点击的按钮添加高亮
            btn.classList.add('active');

            // 更新筛选状态并执行筛选
            currentFilter = btn.getAttribute('data-filter');
            applyFilters();
        });
    });

    // 搜索功能（保持原有逻辑）
    function handleSearch() {
        currentSearch = searchInput.value.trim().toLowerCase();
        applyFilters();
        searchIcon.classList.add('fa-spin');
        setTimeout(() => searchIcon.classList.remove('fa-spin'), 500);
    }
    searchInput.addEventListener('keyup', (e) => e.key === 'Enter' && handleSearch());
    searchIconContainer.addEventListener('click', handleSearch);

    // 筛选逻辑（保持原有逻辑）
    function applyFilters() {
        submissionRows.forEach(row => {
            const rowStatus = row.getAttribute('data-status');
            const rowTitle = row.getAttribute('data-problem-title');

            const statusMatch = currentFilter === 'all' 
                || (currentFilter === 'accepted' && ['accepted', 'success', 'pass'].includes(rowStatus)) 
                || (currentFilter === 'rejected' && !['accepted', 'success', 'pass'].includes(rowStatus));

            const searchMatch = currentSearch === '' || rowTitle.includes(currentSearch);

            row.style.display = statusMatch && searchMatch ? '' : 'none';
        });
    }

    // 初始化：默认“全部”按钮高亮
    document.querySelector('[data-filter="all"]').classList.add('active');
    applyFilters();
});
</script>
{% endblock %}